<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        table {
            border-collapse: collapse;
        }

        .change {
            background-color: black;
        }

        .btn {
            position: absolute;
            bottom: 5%;
            right: 5%;
        }
    </style>
</head>

<body>
    <h1></h1>
    <table cellspacing="0" border="1px solid #000">
        <tbody></tbody>
    </table>
    <div class="btn">
        <button>重置本关</button>
        <button>设置关卡</button>
    </div>

</body>
<script>
    var level = 3;
    var table = document.querySelector('table');
    var tbody = document.querySelector('tbody');
    var h = document.querySelector('h1');
    h.innerHTML = "level:1"

    function setTable() {
        tbody.innerHTML = '';
        for (let i = 0; i < level; i++) {
            var tr = document.createElement('tr');
            tr.setAttribute('row', i);
            for (let j = 0; j < level; j++) {
                var td = document.createElement('td');
                td.setAttribute('col', j);
                tr.appendChild(td);
            }
            tbody.appendChild(tr);
        }
    }
    setTable();
    table.style.height = '80%';
    table.style.width = table.offsetHeight + 'px';
    table.addEventListener('click', function (e) {
        var trs = document.querySelectorAll('tr');
        let i = e.target.parentNode.getAttribute('row') - 0;
        let j = e.target.getAttribute('col') - 0;
        trs[i].children[j].classList.toggle('change');
        if (i > 0) {
            trs[i - 1].children[j].classList.toggle('change');
        }
        if (i < trs.length - 1) {
            trs[i + 1].children[j].classList.toggle('change');
        }
        if (j > 0) {
            trs[i].children[j - 1].classList.toggle('change');
        }
        if (j < trs[i].children.length - 1) {
            trs[i].children[j + 1].classList.toggle('change');
        }
        var tds = document.querySelectorAll('td');
        for (let i = 0; i < tds.length; i++) {
            if (tds[i].className == '') {
                return;
            }
        }
        level++;
        h.innerHTML = "level:" + (level - 2);
        setTable();
    })
    var btn = document.querySelectorAll('button');
    btn[0].addEventListener('click', function () {
        setTable();
    })
    btn[1].addEventListener('click', function () {
        pr = prompt('跳转到level:') - 0 + 2;
        if (pr == 2) {
            return;
        }
        level = pr;
        h.innerHTML = "level:" + (level - 2);
        setTable();
    })
</script>

</html>